<template>
  <div
    class="flex items-center bg-bg-page mr-10 rounded-6 query-item hover:auto-bg"
  >
    <label
      v-if="label"
      class="flex-shrink-0 text-right pl-8 text-14 text-#555 lh-14"
    >
      {{ label }}
    </label>
    <div
      :style="{ width: contentWidth + 'px' }"
      class="flex-shrink-0 flex items-center pt-2"
    >
      <slot />
    </div>
  </div>
</template>
<script lang="ts" setup>
defineProps({
  label: {
    type: String,
    default: "",
  },
  labelWidth: {
    type: Number,
    default: 70,
  },
  contentWidth: {
    type: Number,
    default: 160,
  },
});
</script>

<style lang="scss" scoped>
.query-item {
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
  &:hover {
    border: 1px solid #bfbfbf;
    box-shadow:
      0 1px 4px rgba(9, 30, 66, 0.1),
      0 0 1px rgba(9, 30, 66, 0.2),
      0 1px 2px rgba(9, 30, 66, 0.04);
  }
  ::v-deep(.el-input__wrapper) {
    border: none !important;
    background-color: transparent !important;
    font-size: 14px;
    &.is-focus {
      box-shadow: none !important;
      outline: none !important;
    }
  }
  ::v-deep(.el-input-affix-wrapper) {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  ::v-deep(.el-select-selector) {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  ::v-deep(.el-picker) {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
}
</style>
